<template>
  <div
    class="diy-title"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <template v-if="diyItem.temp?.value == 1">
      <!-- 模板一 -->
      <div
        class="diy-title-temp temp-1"
        :style="styles"
        :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      >
        <div
          class="diy-title-left-hr"
          :style="{ background: diyItem.style.color }"
        ></div>
        <div
          class="diy-title-content"
          :style="[
            `color: ${diyItem.style.color}`,
            `font-size: ${diyItem.style.fz + 'px'}`,
            `font-weight:${diyItem.style.fw ? 'bold' : ''}`,
          ]"
        >
          {{ diyItem.title }}
        </div>
        <div
          class="diy-title-right-hr"
          :style="{ background: diyItem.style.color }"
        ></div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 2">
      <!-- 模板二 -->
      <div
        class="diy-title-temp temp-2"
        :style="styles"
        :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      >
        <div
          class="diy-title-content"
          :style="[
            `color: ${diyItem.style.color}`,
            `font-size: ${diyItem.style.fz + 'px'}`,
            `font-weight:${diyItem.style.fw ? 'bold' : ''}`,
          ]"
        >
          {{ diyItem.title }}
        </div>
        <div
          class="diy-title-bottom-hr"
          :style="{ background: diyItem.style.color }"
        ></div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 3">
      <!-- 模板三 -->
      <div
        class="diy-title-temp temp-3"
        :style="styles"
        :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      >
        <div
          class="diy-title-content"
          :style="[
            `color: ${diyItem.style.color}`,
            `font-size: ${diyItem.style.fz + 'px'}`,
            `font-weight:${diyItem.style.fw ? 'bold' : ''}`,
          ]"
        >
          {{ diyItem.title }}
        </div>
        <div class="diy-title-bottom-line">
          <span
            class="line-left"
            :style="{ background: diyItem.style.color }"
          ></span>
          <span
            class="line-center icon icon-shape"
            :style="{ color: diyItem.style.color }"
          ></span>
          <span
            class="line-right"
            :style="{ background: diyItem.style.color }"
          ></span>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 4">
      <!-- 模板四 -->
      <div
        class="diy-title-temp temp-4"
        :style="styles"
        :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      >
        <div
          class="diy-title-content"
          :style="{
            color: diyItem.style.color,
            fontSize: diyItem.style.fz + 'px',
            borderColor: diyItem.style.color,
          }"
        >
          <div
            class="diy-title-line-left"
            :style="{ background: diyItem.style.color }"
          ></div>
          <div
            class="diy-title-content-text"
            :style="[
              `color: ${diyItem.style.color}`,
              `font-size: ${diyItem.style.fz + 'px'}`,
              `font-weight:${diyItem.style.fw ? 'bold' : ''}`,
            ]"
          >
            {{ diyItem.title }}
          </div>
          <div
            class="diy-title-line-right"
            :style="{ background: diyItem.style.color }"
          ></div>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 5">
      <!-- 模板五 -->
      <div
        class="diy-title-temp temp-5"
        :style="styles"
        :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
      >
        <div
          class="diy-title-left"
          :style="{ background: diyItem.style.move_bg }"
        ></div>
        <div
          class="diy-title-content"
          :style="[
            `color: ${diyItem.style.color}`,
            `font-size: ${diyItem.style.fz + 'px'}`,
            `font-weight:${diyItem.style.fw ? 'bold' : ''}`,
          ]"
        >
          {{ diyItem.title }}
        </div>
        <div
          class="diy-title-move"
          :style="{ color: diyItem.style.move_color }"
          v-if="diyItem.style.move_status == 1"
        >
          <div>{{ diyItem.style.move_text }}</div>
          <div class="icon icon-yao-1"></div>
        </div>
      </div>
    </template>
  </div>
</template>
  <script lang="ts">
export default {
  name: "storeDiyPreviewTitle",
};
</script>
    <script  lang="ts" setup >
import { ref, getCurrentInstance, computed, StyleValue } from "vue";
import { diyTitleDatType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyTitleDatType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          fw: 0,
          fz: "12px",
          color: "#000000",
          move_status: 0,
          move_bg: "",
          move_color: "",
          move_text: "",
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
      };
    },
    index: 0,
  }
);

const styles = computed<StyleValue>(() => {
  return [
    `padding:${props.diyItem.style.pt}px ${props.diyItem.style.pr}px ${props.diyItem.style.pb}px ${props.diyItem.style.pl}px `,
    `background:${
      props.diyItem.style.bg_status == 1 ? props.diyItem.style.bg : "none"
    }`,
    `border-radius:${props.diyItem.style.t_radius}px ${props.diyItem.style.t_radius}px ${props.diyItem.style.b_radius}px ${props.diyItem.style.b_radius}px`,
  ];
});
</script>

<style scoped>
/**************文本****************/

/*模板一*/
.diy-title .diy-title-temp.temp-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}
.diy-title .diy-title-temp.temp-1 .diy-title-content {
  position: relative;
  display: block;
  text-align: center;
  align-items: center;
  max-width: calc(60% - 80px);
  padding: 6px 20px;
  line-height: 20px;
}

.diy-title .diy-title-temp.temp-1 .diy-title-left-hr {
  width: 40px;
  height: 1px;
}
.diy-title .diy-title-temp.temp-1 .diy-title-right-hr {
  width: 40px;
  height: 1px;
}
/*模板二*/
.diy-title .diy-title-temp.temp-2 {
  align-items: center;
  padding: 5px 0;
}
.diy-title .diy-title-temp.temp-2 .diy-title-content {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto;
  align-items: center;
  max-width: calc(80% - 40px);
  padding: 6px 20px;
  line-height: 20px;
}

.diy-title .diy-title-temp.temp-2 .diy-title-bottom-hr {
  width: calc(100% - 20px);
  margin: 0 auto;
  position: relative;
  height: 1px;
}
.diy-title .diy-title-temp.temp-2 .diy-title-bottom-hr::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 50%;
  bottom: 1px;
  left: 25%;
  background: inherit;
}

/*模板三*/
.diy-title .diy-title-temp.temp-3 {
  align-items: center;
  padding: 5px 0;
}
.diy-title .diy-title-temp.temp-3 .diy-title-content {
  position: relative;
  display: block;
  text-align: center;
  margin: 0 auto;
  align-items: center;
  max-width: calc(80% - 40px);
  padding: 6px 20px;
  line-height: 20px;
}
.diy-title .diy-title-temp.temp-3 .diy-title-bottom-line {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 12px;
}
.diy-title .diy-title-temp.temp-3 .diy-title-bottom-line .line-left {
  width: 45%;
  height: 1px;
}
.diy-title .diy-title-temp.temp-3 .diy-title-bottom-line .line-right {
  width: 45%;
  height: 1px;
}
.diy-title .diy-title-temp.temp-3 .diy-title-bottom-line .line-center {
  width: 12px;
  height: 12px;
  line-height: 12px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  font-size: 12px;
  margin: 0 10px;
}

/*模板四*/
.diy-title .diy-title-temp.temp-4 {
  align-items: center;
  padding: 5px 0;
  display: flex;
  justify-content: center;
}
.diy-title .diy-title-temp.temp-4 .diy-title-content {
  position: relative;
  display: inline-block;
  text-align: center;
  align-items: center;
  max-width: calc(80% - 40px);
  padding: 6px;
  line-height: 20px;
  border-style: solid;
  border-width: 1px;
}
.diy-title .diy-title-temp.temp-4 .diy-title-content .diy-title-content-text {
  padding: 3px 15px;
  border-style: solid;
  border-width: 1px;
}
.diy-title .diy-title-temp.temp-4 .diy-title-line-left {
  width: 40px;
  height: 4px;
  position: absolute;
  left: 0;
  top: calc(50% - 2px);
  margin-left: -30px;
}
.diy-title .diy-title-temp.temp-4 .diy-title-line-right {
  width: 40px;
  height: 4px;
  position: absolute;
  right: 0;
  top: calc(50% - 2px);
  margin-right: -30px;
}

/*模板五*/
.diy-title .diy-title-temp.temp-5 {
  align-items: center;
  padding: 5px 0;
  display: flex;
  justify-content: flex-start;
}
.diy-title .diy-title-temp.temp-5 .diy-title-content {
  position: relative;
  display: inline-block;
  align-items: center;
  width: calc(100% - 84px);
  padding: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}
.diy-title .diy-title-temp.temp-5 .diy-title-left {
  width: 4px;
  height: 16px;
  border-radius: 2px;
}

.diy-title .diy-title-temp.temp-5 .diy-title-move {
  width: 80px;
  text-align: right;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.diy-title .diy-title-temp.temp-5 .diy-title-move .icon {
  font-size: 12px;
}
</style>